<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background: gainsboro;
    }
    input{
        height: 150px;
        background: none;
        font-size: 50px;
        outline: none;
    }
</style>
</head>
<body>
<div style="width:100%;height:150px;line-height: 150px;display: flex;background: white">
    <div style="width:10%;line-height: 50px">

    </div>
    <div style="width:80%;text-align: center;line-height: 150px;font-size: 60px;color: grey">
        登录
    </div>
    <div style="width:10%;line-height: 50px">

    </div>
</div>
<div style="width:100%;height:50px;"></div>
<div style="width:98%;margin-top: 20px;padding-left: 2%">
    <input style="width:96%;border-left: none;border-right: none;border-top: none;border-bottom: 1px solid grey" type="text" placeholder="请输入手机号">
    <div style="width:100%;height:50px;"></div>
    <input style="width:96%;border-left: none;border-right: none;border-top: none;border-bottom: 1px solid grey" type="password" placeholder="请输入登录密码">
    <div style="width:100%;height:50px;"></div>
    <input style="width:96%;border-radius: 100px;background:rebeccapurple;color: white" type="button" value="登录">
    <div style="width:100%;height:50px;"></div>
    <input style="width:96%;border-radius: 100px;border: 1px solid grey;color: grey" type="button" value="验证码登录">
    <div style="width:100%;height:50px;"></div>
    <div style="width:100%;">
        <span><a href="#" style="text-decoration: none;font-size: 40px;color: crimson;float: left">还没有账号？快速注册</a></span>
        <span><a href="#" style="text-decoration: none;font-size:40px;color: crimson;float: right">忘记密码！</a></span>
    </div>
</div>
<div style="line-height: 100px;width:100%;border-top: 1px solid grey;position: absolute;bottom: 100px;text-align: center;font-size: 30px;color: grey">
    触屏版&nbsp;&nbsp;|&nbsp;&nbsp;客户端
</div>
</body>
</html>